<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 标签</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script type="text/javascript">
 
 $(function(){
     
     //1. jQuery 对象调用 jQuery 提供的方法的返回值如果是一个对象的话
     //那么这个对象一定是一个 jQuery 对象
     //2. find() 方法: 查找子节点, 返回值为子节点对应的 jQuery 对象
     function removeTr(aNoe){
         //获取 a 节点所在的的 tr 节点. 返回时是 jQuery 对象
         var $trNode = $(aNoe).parent().parent();
         var textContent = $trNode.find("td:first").text() + ", " + $trNode.find("td:eq(1)").text();
         textContent = $.trim(textContent);
         
         var flag = confirm("确定要删除" + textContent + "的信息吗?");
        if(flag){
             $trNode.remove();
         }
         
         return false;
     }
     
     $("#employeetable a").click(function(){
         return removeTr(this);
     });
     //给 submit 添加 onclick 响应事件，添加信息到  #employeetable tbody 中。 
     $("#addEmpButton").click(function(){
		alert(10);
         $("<tr></tr>").append("<td>" + $("#name").val() + "</td>")
                       .append("<td>" + $("#email").val() + "</td>")
                       .append("<td>" + $("#salary").val() + "</td>")
                       .append("<td><a href='#'>Delete</a></td>")
                       .appendTo("#employeetable tbody")
                       .find("a")
                           .click(function(){
                               return removeTr(this)
                           });

         //添加完信息后，将 text 里的值置空。 
//          $("#name").val("");
//          $("#email").val("");
//          $("#salary").val("");
			$(":text").val("sin");
     });     
 })
     

</script>
</head>
<body>

    <center>
        <br> <br> 添加新员工 <br> <br> name: <input type="text"
            name="name" id="name" value="Jack" />&nbsp;&nbsp; email: <input type="text"
            name="email" id="email" value="Dawson@actors.com" />&nbsp;&nbsp; salary: <input type="text"
            name="salary" id="salary" value="12M/year" /> <br> <br>
        <button id="addEmpButton" value="abc">Submit</button>
        <br> <br>
        <hr>
        <br> <br>
        <table id="employeetable" border="1" cellpadding="5" cellspacing=0>
            <tbody>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Salary</th>
                    <th>&nbsp;</th>
                </tr>
                <tr>
                    <td>Tom</td>
                    <td>tom@tom.com</td>
                    <td>5000</td>
                    <td><a href="##">Delete</a></td>
                </tr>
                <tr>
                    <td>
                        Jerry
                    </td>
                    <td>jerry@sohu.com</td>
                    <td>8000</td>
                    <td><a href="deleteEmp?id=002">Delete</a></td>
                </tr>
                <tr>
                    <td>Bob</td>
                    <td>bob@tom.com</td>
                    <td>10000</td>
                    <td><a href="deleteEmp?id=003">Delete</a></td>
                </tr>
            </tbody>
        </table>
    </center>

</body>
</html>